<script setup lang="ts">
import {useRouter} from "vue-router";
import {reactive, ref, toRefs} from "vue";
import {addTeam} from "@/api/TeamApi";
import {showToast, Toast} from "vant";

const router = useRouter();
const showPicker = ref(false);
// 定义表单数据类型
interface FormData {
  name: string;
  description: string;
  expireTime: any;
  maxNum: number;
  password: string;
  status: number;
}

// 初始化表单数据
const initFormData: FormData = {
  "name": "",
  "description": "",
  "expireTime": [],
  "maxNum": 3,
  "password": "",
  "status": 0,
}

const minDate = new Date();

const state = reactive({
  addTeamData: {...initFormData},
  currentDate: new Date(),
})

const onConfirm = ({ selectedValues }: any) => {
  console.log(selectedValues);
  state.addTeamData.expireTime = selectedValues.join('-');
  showPicker.value = false;
};

const {addTeamData, currentDate} = toRefs(state);

const joinOnsubmit = async () => {
  const postData = {
    ...addTeamData.value,
    state: Number(addTeamData.value.status),
    expireTime: addTeamData.value.expireTime
  }
  const res = await addTeam(postData);
  console.log(res.data);
  if (res.data.code === 0) {
    showToast(res.data.discription || "队伍创建成功");
    router.push({
      path: "/team",
      replace: true,
    })
  } else {
    showToast(res.data.discription || "操作失败");
  }
}

</script>

<template>
  <div id="teamAddPage">
    <van-form @submit="joinOnsubmit">
      <div>
        <van-cell-group inset>
          <van-field
              v-model="addTeamData.name"
              name="name"
              label="队伍名"
              placeholder="队伍名："
              :rules="[{ required: true, message: '请填写队伍名' }]"
          />
          <van-field
              v-model="addTeamData.description"
              rows="3"
              autosize
              label="描述"
              type="textarea"
              maxlength="500"
              :rules="[{ required: true, message: '参数不能为空' }]"
              show-word-limit
              placeholder="请输入队伍描述："
          />

          <van-field
              is-link
              readonly
              name="datetimePicker"
              label="过期时间"
              :placeholder="addTeamData.expireTime ? addTeamData.expireTime : '点击选择过期时间' "
              @click="showPicker = true"
          />
          <van-popup v-model:show="showPicker" destroy-on-close position="bottom">
            <van-date-picker
                v-model="addTeamData.expireTime"
                @confirm="onConfirm"
                title="选择日期"
                type="datetime"
                :min-date="minDate"
                format="YYYY-MM-DD HH:mm"
            />
          </van-popup>

          <van-field name="stepper" label="队伍人数">
            <template #input>
              <van-stepper v-model="addTeamData.maxNum" :max="10" :min="2" />
            </template>
          </van-field>

          <van-field name="radio" label="队伍状态">
            <template #input>
              <van-radio-group :rules="[{ required: true, message: '请选择' }]" v-model="addTeamData.status" direction="horizontal">
                <van-radio name="0">公开</van-radio>
                <van-radio name="1">私有</van-radio>
                <van-radio name="2">加密</van-radio>
              </van-radio-group>
            </template>
          </van-field>

          <van-field
              v-if="Number(addTeamData.status) === 2"
              v-model="addTeamData.password"
              type="password"
              name="password"
              label="密码"
              placeholder="密码"
              :rules="[{ required: true, message: '请填写密码' }]"
          />
        </van-cell-group>
      </div>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          创 建 队 伍
        </van-button>
      </div>
    </van-form>
  </div>
</template>

<style scoped>
#teamAddPage {
  margin-top: 10px;
}

</style>